<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 一、push()方法
            在数组尾部增加1个或多个元素，并将新的数组长度返回
        */
        var arr = ["孙悟空", "猪八戒", "沙悟净"];
        var result = arr.push("唐三藏");
        console.log(arr);  // (4) ["孙悟空", "猪八戒", "沙悟净", "唐三藏"]
        console.log(result);  // 4


        /* 二、pop()方法
            删除元素数组尾部的元素，并将删除的元素返回 
        */
        result = arr.pop();
        console.log(result);  // 唐三藏
        console.log(arr);  // (3) ["孙悟空", "猪八戒", "沙悟净"]


        /* 三、unshift()方法
            向数组的开头添加1个或多个元素，并将新的数组长度返回
            向前边插入元素以后，其他的元素索引会依次调整
        */
        console.log(arr);  // (3) ["孙悟空", "猪八戒", "沙悟净"]
        result = arr.unshift("牛魔王", "二郎神");
        console.log(arr);  // (5) ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净"]
        console.log(result);  // 5

        /* 四、shift()方法
            删除数组的第一个元素，并将被删除的元素作为返回值返回
        */
        console.log(arr);  // (5) ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净"]
        result = arr.shift();
        console.log(arr);   // (4) ["二郎神", "孙悟空", "猪八戒", "沙悟净"] 
        console.log(result);  // 牛魔王

        /* 五、slice()方法 
            数组切片，从数组中提取指定的元素
            该方法不会改变数组本身，而是将截取到的元素封装到一个新数组中返回
            参数：左闭右开
                start：必需，开始位置的索引，包含开始位置
                end：结束位置的索引，不包含结束位置
            

        */
        console.log(arr);  // (4) ["二郎神", "孙悟空", "猪八戒", "沙悟净"] 
        result = arr.slice(0,3);  
        console.log(result);  // (3) ["二郎神", "孙悟空", "猪八戒"]

        // 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
        result = arr.slice(1);          
        console.log(result);  // (3) ["孙悟空", "猪八戒", "沙悟净"]

        // 索引可以传递一个负值，如果传递一个负值，则从后往前计算
        // -1 倒数第一个    -2 倒数第二个
        result = arr.slice(1,-1);  // 也是左闭右开
        console.log(result);  // (2) ["孙悟空", "猪八戒"]

        /* splice()方法
            删除元素，并向数组添加新元素。可以用于删除数组中的指定元素
            使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
            参数：
                第一个，表示开始位置的索引 
                第二个，表示删除的数量  
                第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

        */
        arr = ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"];
        result = arr.splice(0, 2);
        console.log(result); // ["牛魔王", "二郎神"]
        console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]

        arr = ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"];
        result = arr.splice(1, 2);
        console.log(result); // ["二郎神", "孙悟空"]
        console.log(arr); // ["牛魔王", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]

        // 3个参数示例
        // 删除元素
        arr = ["孙悟空", "猪八戒", "沙悟净", "唐三藏"];
        result = arr.splice(0,1);
        console.log(result);  // ["孙悟空"]
        console.log(arr);  // (3) ["猪八戒", "沙悟净", "唐三藏"]
        // 替换元素
        arr = ["孙悟空", "猪八戒", "沙悟净", "唐三藏"];
        result = arr.splice(0, 1, "牛魔王", "铁扇公主", "红孩儿");
        console.log(result); // ["孙悟空"]
        console.log(arr); // ["牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙悟净", "唐三藏"]
        // 插入元素
        arr = ["孙悟空", "猪八戒", "沙悟净", "唐三藏"];
        result = arr.splice(0, 0, "牛魔王", "铁扇公主", "红孩儿");
        console.log(result); // []
        console.log(arr); // ["牛魔王", "铁扇公主", "红孩儿", "孙悟空", "猪八戒", "沙悟净", "唐三藏"]


        /* 六、slice和splice比较
            slice可以提取数组中指定元素
            splice可以增加元素（插入元素）、删除元素、修改（替换）元素，它的功能更强大
        */


        /* 七、sort()方法 
            可以用来对数组中的元素进行排序
            也会影响原数组，默认会按照Unicode编码进行排序
        */
        var arr = ['f', 'b', 'a', 'h', 'e', 'd'];
        arr.sort();
        console.log(arr); // ["a", "b", "d", "e", "f", "h"]

        // 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序
        // 所以对数字进行排序时，可能会得到错误的结果
        arr = ['2', '44', '9', '8', '2', '0'];
        arr.sort();
        console.log(arr); // ["0", "2", "2", "44", "8", "9"]

        // 我们可以在sort()添加一个回调函数，来自己指定排序规则
        // 回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
        // 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
        // 浏览器会根据回调函数的返回值来决定元素的顺序，
            // 如果返回一个大于0的值，则元素会交换位置
            // 如果返回一个小于等于0的值，则元素位置不变

        arr = [2, 44, 9, 8, 2, 0, 6];
        arr.sort(function(a,b){
            if(a > b){
                return 1;
            } else {
                return -1;
            }
        });
        console.log(arr); // [0, 2, 2, 6, 8, 9, 44]

        // 简洁写法
        // 如果需要升序排列，则返回a - b
        // 如果需要降序排列，则返回b - a
        arr.sort(function(a,b){
            // 升序排列
            return a - b;
        });
        console.log(arr); // [0, 2, 2, 6, 8, 9, 44]
        arr.sort(function(a,b){
            // 降序排列
            return b - a;
        });
        console.log(arr); // [44, 9, 8, 6, 2, 2, 0]

        /* 八、小结：
            
            会对原数组产生影响的方法：push、pop、shift、unshift、splice、reverse、sort
            不会对原数组产生影响的方法：slice、concat、join
            添加元素的方法：push、unshift、splice
            删除元素的方法：pop、shift、splice
            替换元素的方法：splice
            连接元素的方法：concat、join
            排序方法：reverse、sort
        */
    </script>
</head>
<body>
    <table border="1px;">
        <th>操作</th>
        <th>方法</th>
        <tr>
            <td>末尾添加</td>
            <td>push</td>
        </tr>
        <tr>
            <td>末尾删除</td>
            <td>pop</td>
        </tr>
        <tr>
            <td>开头添加</td>
            <td>unshift</td>
        </tr>
        <tr>
            <td>开头删除</td>
            <td>shift</td>
        </tr>
    </table>
</body>
</html>